Ext.define('Ext.ux.desktop.TaskBar', {
    extend: 'Ext.toolbar.Toolbar', // TODO - make this a basic hbox panel...

    requires: [
        'Ext.button.Button',
        'Ext.resizer.Splitter',
        'Ext.menu.Menu',

        'Ext.ux.desktop.StartMenu'
    ],

    alias: 'widget.taskbar',

    cls: 'ux-taskbar',
    height : 35,

    /**
     * @cfg {String} startBtnText
     * The text for the Start Button.
     */
    startBtnText: 'Start',

    initComponent: function () {
        var me = this;

        me.startMenu = new Ext.ux.desktop.StartMenu(me.startConfig);

        me.quickStart = new Ext.toolbar.Toolbar(me.getQuickStart());

        var i = 0;
        var count = 0;
        for (i=0; i<me.quickStart.items.length; ++i)
        {
            if (me.quickStart.items.getAt(i).hidden1)
                me.quickStart.items.getAt(i).hide();
            else ++count;
        }
        
        if (count == 0) me.quickStart.hide();
        else me.quickStart.show();

        if (count < 4)
            me.quickStart.setWidth(25 * count);
        else me.quickStart.setWidth(100);
        
        me.windowBar = new Ext.toolbar.Toolbar(me.getWindowBarConfig());

        me.tray = new Ext.toolbar.Toolbar(me.getTrayConfig());

        me.items = [
            {
                xtype: 'button',
                cls: 'ux-start-button',
                iconCls: 'ux-start-button-icon',
                menu: me.startMenu,
                menuAlign: 'bl-tl',
                text: me.startBtnText,
				handler: function() {
                    if (_remove_link_in_item_menu >= 2) return false;
                    ++_remove_link_in_item_menu;
                    $('.x-menu-item-link').each(function(){
                        var t = $(this);
                        if (t.attr('href') === '#'){
                            t.removeAttr('href');
                            t.mouseout(function(){
                                if (_remove_link_in_item_menu >= 2) return false;
                                $('.x-menu-item-link').each(function(){
                                    var t = $(this);
                                    if (t.attr('href') === '#'){
                                        t.removeAttr('href');
                                        t.mouseout(function(){
                                            if (_remove_link_in_item_menu >= 2) return false;
                                            $('.x-menu-item-link').each(function(){
                                                var t = $(this);
                                                if (t.attr('href') === '#') t.removeAttr('href')
                                            });
                                        });
                                    }
                                });
                            });
                        }
                    });
                    $('.x-menu-item-link').removeAttr('href');
                }
            },
            me.quickStart,
            {
                xtype: 'splitter', html: '&#160;',
                height: 14, width: 2, // TODO - there should be a CSS way here
                cls: 'x-toolbar-separator x-toolbar-separator-horizontal'
            },
            //'-',
            me.windowBar,
            '-',
            me.tray
        ];

        me.callParent();
    },

    afterLayout: function () {
        var me = this;
        me.callParent();
        me.windowBar.el.on('contextmenu', me.onButtonContextMenu, me);                
    },

    /**
     * This method returns the configuration object for the Quick Start toolbar. A derived
     * class can override this method, call the base version to build the config and
     * then modify the returned object before returning it.
     */
    getQuickStart: function () {
        var me = this, ret = {
            minWidth: 20,
            width: 100,
            items: [],
            enableOverflow: true
        };

        Ext.each(this.quickStart, function (item) {
            ret.items.push({
                tooltip: { text: item.name, align: 'bl-tl' },
                //tooltip: item.name,
                overflowText: item.name,
                iconCls: item.iconCls,
                module: item.module,
                data : item,
                hidden1 : item.hidden,
                handler: me.onQuickStartClick,
                scope: me
            });
        });

        return ret;
    },

    /**
     * This method returns the configuration object for the Tray toolbar. A derived
     * class can override this method, call the base version to build the config and
     * then modify the returned object before returning it.
     */
    getTrayConfig: function () {
        var iWidth = 160;
        if (vnkit_site.itype === 1 || vnkit_site.itype === 3 || vnkit_site.itype === 4 || vnkit_site.itype === 5 || vnkit_site.itype === 8 || vnkit_site.itype === 10)
            iWidth = 260;
        var ret = {
            width: iWidth,
            items: this.trayItems
        };
        delete this.trayItems;
        return ret;
    },

    getWindowBarConfig: function () {
        return {
            flex: 1,
            cls: 'ux-desktop-windowbar',
            items: [ '&#160;' ],
            layout: { overflowHandler: 'Scroller' }
        };
    },

    getWindowBtnFromEl: function (el) {
        var c = this.windowBar.getChildByElement(el);
        return c || null;
    },

    onQuickStartClick: function (record) {
        if (record.data.must_login == 1 && vnkit_user_id == 0)
        {
            window.location.href = vnkit_url_login;
            return;
        }
        
        var me = this;
        var args = record.data.args ? eval('(' + record.data.args + ')') : {};
        if (!args.iconCls) args.iconCls = record.data.iconClsMi;
        if (args.set_nam_hoc)
            vnkit_nam_hoc = args.set_nam_hoc;
        if (args.nam_hoc)
        {
            args.nam_hoc = vnkit_nam_hoc;
            args.title = args.title ? getStrNamHoc() + args.title : getStrNamHoc() + record.data.text;
        }
        
        var win = Ext.create(record.data.open_class);
        win = win.createWindow(args);
        
        /*if (win) {
            if (win.maximized) win.maximize();
            else me.restoreWindow(win);
        }
        
        var module = this.app.getModule(btn.module);
        if (module) {
            module.createWindow();
        }*/
    },
    
    onButtonContextMenu: function (e) {
        var me = this, t = e.getTarget(), btn = me.getWindowBtnFromEl(t);
        if (btn) {
            e.stopEvent();
            me.windowMenu.theWin = btn.win;
            me.windowMenu.showBy(t);
        }
    },

    onWindowBtnClick: function (btn) {
        var win = btn.win;

        if (win.minimized || win.hidden) {
            win.show();
        } else if (win.active) {
            win.minimize();
        } else {
            win.toFront();
        }
    },

    addTaskButton: function(win) {
        var config = {
            iconCls: win.iconCls,
            enableToggle: true,
            toggleGroup: 'all',
            width: 140,
            text: Ext.util.Format.ellipsis(win.title, 20),
            listeners: {
                click: this.onWindowBtnClick,
                scope: this
            },
            win: win
        };

        var cmp = this.windowBar.add(config);
        cmp.toggle(true);
        return cmp;
    },

    removeTaskButton: function (btn) {
        var found, me = this;
        me.windowBar.items.each(function (item) {
            if (item === btn) {
                found = item;
            }
            return !found;
        });
        if (found) {
            me.windowBar.remove(found);
        }
        return found;
    },

    setActiveButton: function(btn) {
        if (btn) {
            btn.toggle(true);
        } else {
            this.windowBar.items.each(function (item) {
                if (item.isButton) {
                    item.toggle(false);
                }
            });
        }
    }
});

/**
 * @class Ext.ux.desktop.TrayClock
 * @extends Ext.toolbar.TextItem
 * This class displays a clock on the toolbar.
 */
Ext.define('Ext.ux.desktop.TrayClock', {
    extend: 'Ext.toolbar.TextItem',

    alias: 'widget.trayclock',

    cls: 'ux-desktop-trayclock',

    html: '&#160;',

    timeFormat: 'g:i A',

    tpl: '{time}',

    initComponent: function () {
        var me = this;

        me.callParent();

        if (typeof(me.tpl) == 'string') {
            me.tpl = new Ext.XTemplate(me.tpl);
        }
    },

    afterRender: function () {
        var me = this;
        Ext.Function.defer(me.updateTime, 100, me);
        me.callParent();
    },

    onDestroy: function () {
        var me = this;

        if (me.timer) {
            window.clearTimeout(me.timer);
            me.timer = null;
        }

        me.callParent();
    },

    updateTime: function () {
        var me = this, time = Ext.Date.format(new Date(), me.timeFormat),
            text = me.tpl.apply({ time: time });
        if (me.lastText != text) {
            me.setText(text);
            me.lastText = text;
        }
        me.timer = Ext.Function.defer(me.updateTime, 10000, me);
    }
});
var _remove_link_in_item_menu = 0;

